import { useState, useImperativeHandle, forwardRef } from "react";
import { Modal, Input } from "antd";
import RichTinymce from "@/components/RichTinymce/RichTinymce";
import { ModalTitle } from "../stye";

export default forwardRef(function EditorTitle({ titleModify = () => {} }: { titleModify: (title: string, content: string) => void }, ref) {
  const [visible, setvisible] = useState(false);
  const [titleValue, setTitle] = useState("");
  let [contentValue, setContent] = useState("");

  // 子组件暴露方法
  useImperativeHandle(ref, () => ({
    // 打开
    open(title: string, content: string) {
      setvisible(true);
      setTitle(title);
      setContent(content);
    }
  }));
  const handleOk = () => {
    document.getElementById("focal")?.focus();
    if (contentValue.replace(/<[^>]+>/g, "") == "") {
      contentValue = "";
      setContent(contentValue);
    }
    setvisible(false);
    titleModify(titleValue, contentValue);
  };
  return (
    <Modal width="45%" open={visible} onOk={handleOk} onCancel={() => setvisible(false)}>
      <ModalTitle>
        <div className="editor-title flex">
          <div className="title">标题：</div>
          <Input value={titleValue} onChange={e => setTitle(e.target.value)} />
        </div>
        <div className="editor-title flex">
          <div className="title">说明</div>
          <div className="title-rich">
            {contentValue}
            <RichTinymce initialValue={contentValue} onEditorChange={(content: string) => setContent(content)}></RichTinymce>
          </div>
        </div>
      </ModalTitle>
    </Modal>
  );
});
